<!-- 订单详情模块 -->

<template>
  <div id="OrderDetails">
    <div class="userInfo">
      <div class="title">用户信息</div>
      <div class="userInfo_content">
        <div class="item">用户昵称:{{ obj.deliveryName }}</div>
        <div class="item">绑定电话:{{ obj.deliveryId }}</div>
      </div>
    </div>
    <div class="line"></div>
    <div class="receivingInformation">
      <div class="title">收货信息</div>
      <div class="userInfo_content">
        <div class="item">收货人:{{ obj.realName }}</div>
        <div class="item">收获电话:{{ obj.phone }}</div>
      </div>
      <div class="item">收货地址:{{ obj.userAddress }}</div>
    </div>
    <div class="theOrderInformation">
      <div class="title">订单信息</div>
      <div class="userInfo_content">
        <div class="item">订单编号:{{ obj.orderId }}</div>
        <div class="item active" v-if="obj.statusStr != null">
          订单状态:{{ obj.statusStr.value }}
        </div>
      </div>
      <div class="userInfo_content">
        <div class="item">商品总数:{{ obj.totalNum }}</div>
        <div class="item">商品总价:{{ obj.totalPrice }}</div>
      </div>
      <div class="userInfo_content">
        <div class="item">支付邮费:{{ obj.payPostage }}</div>
        <div class="item">优惠券金额:{{ obj.refundPrice }}</div>
      </div>
      <div class="userInfo_content">
        <div class="item">实际支付:{{ obj.payPrice }}</div>
        <div class="item">抵扣金额:{{ obj.deductionPrice }}</div>
      </div>
      <div class="userInfo_content">
        <div class="item">退款金额:{{ obj.couponPrice }}</div>
        <div class="item">创建时间:{{ obj.createTime }}</div>
      </div>
      <div class="userInfo_content">
        <div class="item">支付方式:{{ obj.payTypeStr }}</div>
        <div class="item">推广人:{{ obj.spreadName }}</div>
      </div>
      <div class="item">商家备注:{{ obj.systemStore }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "OrderDetails",
  props: {
    obj: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
};
</script>

<style scoped lang="scss">
.userInfo {
}
.title {
  padding-bottom: 10px;
}
.userInfo_content {
  display: flex;
  height: 30px;

  .item {
    flex: 1;
    font-size: 12px;
  }
}
.line {
  width: 100%;
  height: 1px;
  background-color: #ccc;
  margin: 12px 0;
}
.item {
  font-size: 12px;
}

.active {
  color: red;
}
</style>